<template>
  <view>
    <view class="head">
      <van-dialog id="van-dialog" />
      <image src="@assets/contract.png" style="width: 80rpx" class="binding" mode="widthFix"></image
      ><text>签署合同</text>
    </view>
    <view class="select">
      <view class="title"><text>请选择操作的方式</text></view>
      <view class="boxs">
        <view @tap="router" :animation="animationLeft">申请合同</view>
        <view class="colorC" @tap="open" :animation="animationRight">查看记录</view>
      </view>
    </view>
    <van-dialog
      :use-slot="true"
      :use-title-slot="true"
      :show="showZ"
      confirmButtonText="关闭"
      @close="onClose"
      width="85%"
      zIndex="120"
    >
      <slot-view name="title"><view class="Ztitle">合同记录</view> </slot-view>
      <view class="Kjlist">
        <view v-if="loading" class="vanLoading">
          <van-loading type="spinner" size="24px" vertical="true" color="#1989fa">合同记录加载中...</van-loading>
        </view>
        <block v-if="zmlist.length">
          <view class="panel" v-for="(item, index) in zmlist" :key="index">
            <view class="headz">
              <view class="letf">
                <view class="title">申请人姓名: {{ item.yuangong_name }}</view>
                <view class="desc">记录ID: {{ item.id }}</view>
                <view class="desc"
                  >支付状态:
                  <van-tag size="medium" :type="item.is_pay ? 'success' : 'danger'">{{ item.is_pay | isPay }}</van-tag>
                </view>
                <view v-if="item.qsstatus" class="desc"
                  >签署状态:<van-tag type="warning" size="medium">{{ item.qsstautsname }}</van-tag>
                </view>
                <view class="desc">申请时间: {{ item.time }}</view>
              </view>
              <view class="right">
                <text class="colorS">{{ item.status ? '已审核' : '申请中' }}</text>
              </view>
            </view>
            <view class="footer">
              <van-button size="small" @tap="preview(item)">预览</van-button>
              <van-button
                v-if="item.is_pay && item.status == 1 && item.qsstatus <= 1"
                size="small"
                type="danger"
                @tap="sign(item)"
                >签署合同</van-button
              >
              <van-button
                v-if="item.is_pay && item.status == 1 && item.qsstatus == 2"
                size="small"
                type="info"
                @tap="download(item)"
                >下载合同</van-button
              >
              <van-button v-if="!item.is_pay && item.status" size="small" type="danger" @tap="goPay(item)"
                >去支付</van-button
              >
            </view>
          </view>
        </block>
        <view class="noText" v-if="!zmlist.length">
          <van-icon size="300rpx" name="https://xxyg.daxinxin.vip/wxapp/nodata.png" />
          <text> 暂无记录 </text>
        </view>
      </view>
    </van-dialog>

    <view class="qiansu">
      <view :animation="animationWidth" class="qiansutext"><text>签署流程</text></view>
      <view class="qiansulist" :animation="animationHeight"
        ><van-steps :steps="steps" :active="active" direction="vertical"
      /></view>
    </view>
  </view>
</template>

<script>
import Taro from '@tarojs/taro';
import { htlist, htdown, dzhtqz } from '@api/zm';
import Dialog from '../../components/vant/dialog/dialog';
export default {
  data() {
    return {
      loading: true,
      showA: false,
      active: 8,
      showZ: false,
      zmlist: [],
      steps: [
        {
          text: '步骤一',
          desc: '点击申请合同',
        },
        {
          text: '步骤二',
          desc: '填写信息',
        },
        {
          text: '步骤三',
          desc: '点击提交合同',
        },
        {
          text: '步骤四',
          desc: '等待管理员审核',
        },
        {
          text: '步骤五',
          desc: '审核通过',
        },
        {
          text: '步骤六',
          desc: '点击支付',
        },
        {
          text: '步骤七',
          desc: '方可签署电子合同',
        },
        {
          text: '步骤八',
          desc: '签署状态为完成',
        },
        {
          text: '步骤九',
          desc: '方可下载电子合同',
        },
      ],
      animationLeft: '',
      animationRight: '',
      animationHeight: '',
      animationWidth: '',
      refresh: true,
    };
  },
  computed: {
    bangding() {
      return this.$store.state.binding.bd;
    },
  },
  onShow() {
    let bd = Taro.getStorageSync('bd');
    this.$store.commit('binding/isbd');
    // console.log(bd, '这是绑定');

    if (this.refresh) {
      htlist().then((res) => {
        this.zmlist = res.data;
        this.loading = false;
      });
    }
    if (bd) {
      return;
    }
    this.$store.dispatch('binding/binding').then(() => {
      if (this.bangding == 0) {
        Taro.showModal({
          title: '未绑定',
          content: '该功能需要绑定手机才能使用',
          confirmText: '马上绑定',
          cancelText: '返回首页',
          success: function (res) {
            if (res.confirm) {
              Taro.navigateTo({
                url: '/pages/binding/index',
              });
            } else if (res.cancel) {
              // Taro.navigateBack({
              //   delta: 2,
              // });
              Taro.reLaunch({
                url: '/pages/index/index',
              });
            }
          },
        });
      }
    });
  },
  created() {
    this.$isLogin();
    htlist().then((res) => {
      if (!res.code) {
        this.zmlist = res.data;
        this.loading = false;
      }
    });
    setTimeout(() => {
      let a = require('../../utils/animation');
      a.fadeXAnimation(this, 'animationLeft', 0, 1, 'x');
      a.fadeXAnimation(this, 'animationRight', 0, 1, 'x');
      a.heightAnimation(this, 'animationHeight', '1100rpx');
      a.widthAnimation(this, 'animationWidth', '200rpx');
    }, 10);
  },
  methods: {
    preview(e) {
      let _that = this;
      this.refresh = false;
      Taro.showLoading({
        title: '生成预览模板',
      });
      htdown({ id: e.id }).then((res) => {
        if (!res.code) {
          Taro.downloadFile({
            url: res.data,
            filePath: '',
            success: function (res) {
              var filePath = res.tempFilePath;
              Taro.openDocument({
                filePath: filePath,
                success: function (res) {
                  console.log('打开文档成功');
                },
              });
            },
          });
        }
      });
    },
    router() {
      Taro.navigateTo({
        url: `/pages/zm/zmShow/index?title=合同信息填写&type=5`,
      });
    },
    open() {
      this.showZ = true;
      this.loading = true;
      htlist().then((res) => {
        if (!res.code) {
          this.zmlist = res.data;
          this.loading = false;
        }
      });
    },
    onClose() {
      this.showZ = false;
    },
    goPay(e) {
      this.refresh = false;
      Taro.navigateTo({
        url: `/pages/checkout/index?id=${e.id}&paynum=${e.pay_num}&youji=3&type=1`,
      });
    },

    sign(e) {
      Dialog.alert({
        
        message: '签署合同请核实确认相关合同信息，并正确签名',
        title: '温馨提示',
        confirmButtonText:"了解并开始签署",
        theme: 'round-button',
        zIndex: 999,
        width:'80%'
      }).then(() => {
          
            Taro.showLoading({
              title: '生成启动签署模板',
            });
            dzhtqz({ id: e.id }).then((res) => {
              console.log(res.url);
              Taro.navigateTo({
                url: `/pages/details/index?url=${encodeURIComponent(res.url)}`,
              });
            });
         
      });
      // Taro.showModal({
      //   title: '温馨提示',
      //   content: '签署合同请核实确认相关合同信息，并正确签名。',
      //   confirmText: '了解',
      //   showCancel: false,
      //   success: function (res) {
     
      //   },
      // });
    },
    download(e) {
      Taro.showLoading({
        title: '生成下载模板',
      });
      setTimeout(function () {
        Taro.hideLoading();
        Taro.showModal({
          title: '提示',
          confirmText: '复制链接',
          content: '目前小程序不支持本地下载 , 请点击复制链接到任意浏览器打开下载',
          success: function (res) {
            if (res.confirm) {
              Taro.setClipboardData({
                data: e.qsfile,
                success: function (res) {
                  Taro.getClipboardData({
                    success: function (res) {
                      console.log(res.data); // data
                    },
                  });
                },
              });
            } else if (res.cancel) {
              console.log('用户点击取消');
            }
          },
        });
      }, 1000);
    },
  },
  onShareAppMessage(res) {
    if (res.from === 'button') {
      // 来自页面内转发按钮
      console.log(res.target);
    }
    return {
      title: '薪薪员工（签署合同）',
      path: '/pages/contract/index?isZF=1',
      success: function (res) {
        // 转发成功
      },
      fail: function (res) {
        // 转发失败
      },
    };
  },
  onShareTimeline() {},
};
</script>

<style lang="less">
page {
  background: #fff;
  font-family: Microsoft Yahei;
  font-size: 30px;
}
.head {
  width: 93%;
  height: 240px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #4da6ff;
  font-size: 60px;
  color: #fff;
  border-radius: 0 0 40px 40px;
}
.binding {
  width: 60px;
  margin-right: 30px;
}
.select {
  margin-top: 100px;
  .title {
    width: 100%;
    text-align: center;
    font-size: 40px;
  }
  .boxs {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-top: 50px;
    view {
      width: 300px;
      height: 300px;
      text-align: center;
      line-height: 300px;
      font-size: 45px;
      background-color: #19caad;
      border-radius: 50%;
    }
    view:nth-child(1) {
      transform: translateX(-400px);
    }
    .colorC {
      transform: translateX(400px);
      background-color: #f4606c;
    }
  }
}
.Ztitle {
  font-size: 40px;
  margin-bottom: 10px;
}
.Kjlist {
  width: 100%;
  height: 700px;
  overflow: auto;
  .vanLoading {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    // margin: 0 auto;
    // margin-top: 300px;
  }
  .noText {
    // width: 100%;
    // text-align: center;
    margin-top: 100px;
    color: #1296db;
    display: flex;
    letter-spacing: 30px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text {
      margin-top: 30px;
    }
  }
}
.panel {
  display: flex;
  flex-direction: column;
  padding: 20px;
  border-bottom: #f8f9fa solid 1px;
  .headz {
    margin-bottom: 30px;
    .letf {
      float: left;
      .title {
        font-size: 35px;
        font-weight: 550;
        margin-bottom: 10px;
      }
      .desc {
        font-size: 30px;
        color: #969799;
      }
    }
    .right {
      float: right;
      .colorS {
        color: #4da6ff;
      }
      .colorF {
        color: #f75454;
      }
    }
  }
}
.not {
  float: right;
  color: red;
  display: flex;
  align-items: center;
}
.titleZ {
  display: flex;
  align-items: center;
}
.footer {
  display: flex;
  flex-direction: row-reverse;
  .van-button {
    margin-left: 20px;
  }
}
.qiansu {
  margin-top: 50px;
  margin-left: 50px;
  text {
    font-weight: 800;
  }
  .qiansutext {
    width: 0;
    overflow: hidden;
    text {
      width: 200px;
      display: block;
    }
  }
  .qiansulist {
    height: 0;
    overflow: hidden;
  }
 
}
 .van-dialog__header{
    color: #000;
  }
  .van-dialog__message-text{
    color: #1989fa;
    font-size: 30rpx;
  }
</style>